<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
        <link rel="stylesheet" type="text/css" href="./css/style.css"/>
        <style type="text/css">
            body{
                background-color: cornsilk;width: 100vw;height: 100vh;
            }
            #body{
                display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100vw;height: 100vh;
            }
            .btn{
                box-sizing: border-box;padding: 10px 20px;border: 1px solid #000000;border-radius: 5px;margin: 5px;width: 300px;
            }
            .big{
                width: 500px;height: 300px;
            }
        </style>
	</head>
	<body>
        <div id="body">
            <div class="btn abc">你猜</div>
            <div class="btn bdd">你猜我猜不猜</div>
            <div class="btn hah">你猜我猜你猜我猜不猜</div>
            <div class="btn big">你猜我猜你猜我猜你猜我猜不猜</div>
        </div>
	</body>
    <script src="./cursor.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
		window.onload = () =>{
			new DynamicCursor({
				triggerElements: [
					{className: 'abc',icon: 'lab la-accessible-icon'},
					{className: 'bdd',icon: 'las la-dragon'},
					{className: 'hah'},
					{className: 'big'}
				],
				iconSize: 28
			});
		}
    </script>
</html>
